<template>
	<view class="release">
		<!-- 商品分类 -->
		<navigator url="/pages/test/test01">test01</navigator>
		<view class="type">
			<view class="type-select">
				<view>
					<view class="title">
						<text>商品总分类:</text>
					</view>
					<view class="type">
						<view class="head-box" @click="issueFlag=!issueFlag">
							<view class="show-box">
								<text class="button">{{typeVal}}</text>
								<image src="/static/imgs/myStore/select.png" class="item-img"></image>
							</view>
							<view class="item-box" v-if="issueFlag">
								<view v-for="(item,index) in cate" :key="index" @click="typeSelect(item.cateid,item.catename)">
									{{item.catename}}
								</view>
							</view>
						</view>
					</view>
					<view class="info">
						<text>商品总分类内容写入分类页内容</text>
					</view>
				</view>

				<view>
					<view class="title1">
						<text>店内商品分类:</text>
					</view>
					<view class="type">
						<view class="head-box" @click="shopFlag=!shopFlag">
							<view class="show-box">
								<text class="button">{{shopTypeVal}}</text>
								<image src="/static/imgs/myStore/select.png" mode="" class="item-img"></image>
							</view>
							<view class="item-box" v-if="shopFlag">
								<view v-for="(item,index) in priceCate" :key="index" @click="shopTypeSelect(item.cateid,item.catename)">
									{{item.catename}}
								</view>
							</view>
						</view>
					</view>
					<view class="info">
						<text>商品分类内容</text>
						<text>活动专区 正价爆品 组合促销</text>
					</view>
				</view>
			</view>
			<!-- 商品图片视频 -->
			<view class="img">
				<view class="img-box">
					<text>主图</text>
					<scroll-view class="img-list" :scroll-x="true">
						<view class="list" :style="imgStyle">
							<view class="singleImg" v-for="(img, sub) in goodsImgList" :key="sub">
								<image :src="img" :lazy-load="true" mode="aspectFill" @click="previewImg(sub)"></image>
								<view class="remove" @click="removeImg(sub)">
									<text class="iconfont remove-img">&#xe628;</text>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="img-item">
						<image src="/static/imgs/myStore/img.png" @click="goodsImg"></image>
						<text>{{goodsImgList.length}}/8</text>
					</view>
				</view>
				<view class="video-box">
					<text>视频</text>
					<view class="video-item1" v-for="(item,index) in videoList" :key="index">
						<video class="video" :src="item" controls></video>
						<view class="remove" @click="removeVideo(index)">
							<text class="iconfont remove-img">&#xe628;</text>
						</view>
					</view>
					<view class="video-item">
						<image src="/static/imgs/myStore/video.png" @click="goodVideo"></image>
						<text>{{videoList.length}}/1</text>
					</view>
				</view>
			</view>
			<view class="goodsName">
				<text>标题</text>
				<input type="text" maxlength="15" v-model="prodesc" placeholder="限制15个字" />
			</view>
			<view class="goodsPrice">
				<text>商品价格</text>
				<view class="priceTitle">
					<text>注：系统自动折算后价格(原价*折扣)</text>
					<view class="price">
						<view>
							<text>原价:</text>
							<input type="number" maxlength="7" />
							<text class="RMB">元</text>
						</view>
						<view>
							<text>现价:</text>
							<input type="number" v-model="discount" maxlength="7" disabled="true" />
							<text class="RMB">元</text>
						</view>
						<view>
							<text>折扣:</text>
							<input type="number" maxlength="3" />
							<text class="RMB">折</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="activity">
			<text>商品活动（选填）</text>
			<view class="limit">
				<text>限购:</text>
				<view class="select-region">
					<view v-for="(item, index) in radioList" :key="item.value">
						<label class="radio">
							<radio @click="radioChange(item,index)" value="1" :checked="index === current" /></label>
						<view class="">
							<text>{{item.name}}</text>
							<input type="number" placeholder="(限购数量)" />
						</view>
					</view>
				</view>
			</view>
			<view class="other">
				<text>其他:</text>
				<view class="select-region">
					<view v-for="(item, index) in otherList" :key="item.value">
						<label class="radio">
							<radio @click="otherChange(item,index)" value="1" :checked="index === otherCurrent" />
						</label>
						<view class="">
							<text>{{item.name}}</text>
							<view class="timeSetting" v-if="index == 0 || index==2">
								<view class="startAnEnd">
									<text>开始:</text>
									<input type="number" placeholder="10.28 12:00:00" />
								</view>
								<view class="startAnEnd">
									<text>结束:</text>
									<input type="number" placeholder="10.28 12:00:00" />
								</view>
							</view>
							<view class="timeSetting" v-if="index == 1">
								<view class="startAnEnd">
									<input type="number" placeholder="10.28 12:00:00" />
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
			<view class="send">
				<text>参与满赠:</text>
				<label class="radio">
					<radio @click="sendChange" :checked="ischecked" />
				</label>
				<text style="color: #666666;">(默认否，勾选为是)</text>
			</view>
		</view>
		<view class="infos">
			<text>商品简介（选填）</text>
			<view class="box">
				<checkbox-group @change="checkboxChange">
					<view class="checkbox" v-for="item in checkList" :key="item.value">
						<label class="uni-list-cell uni-list-cell-pd">
							<checkbox style="transform:scale(0.7);" :value="item.value" :checked="item.checked" />
							{{ item.name }}
						</label>
						<input type="text" />
					</view>
				</checkbox-group>
			</view>
			<view class="img mt">
				<text>产品详情介绍图</text>
				<view class="img-box">
					
					<scroll-view class="img-list" :scroll-x="true">
						<view class="list" :style="imgStyle">
							<view class="singleImg" v-for="(img, sub) in goodsImgList" :key="sub">
								<image :src="img" :lazy-load="true" mode="aspectFill" @click="previewImg(sub)"></image>
								<view class="remove" @click="removeImg(sub)">
									<text class="iconfont remove-img">&#xe628;</text>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="img-item">
						<image src="/static/imgs/myStore/img.png" @click="goodsImg"></image>
						<text>{{goodsImgList.length}}/8</text>
					</view>
				</view>
			</view>
			<view class="btn" @click="onConfirm">
				<text>确认发布</text>
			</view>
		</view>
		

	</view>
</template>
<script>
	export default {
		data() {
			return {
				goods: {
					// sysproid: , // 系统分类ID
					// procate: , // 产品分类ID
					// proname: , //	商品名称
					// proimgs: , // 商品图片
					// nowprice: , //现价
					// preprice: , //原价
					// discount: , // 折扣价
					// shopid: , // 店铺ID
					// prodesc: , // 商品描述

				},
				prodesc: '', // 标题
				nowprice: '', //现价
				preprice: '', // 原价
				discount: '', // 折扣
				goodsImgList: [], // 图片二进制 列表
				imgUrls: [], // 图片上传到服务器后的地址
				videoList: [], // 视频二进制列表
				videoUrls: [], // 视频上传到服务器后的地址
				imgNum: 1,
				shopFlag: false,
				typeVal: '请选择',
				shopTypeVal: '请选择',
				issueFlag: false,
				current: -1,
				otherCurrent: -1,
				ischecked: false,
				checkList: [{
						value: '1',
						name: '品牌'
					},
					{
						value: '2',
						name: '规格',
					},
					{
						value: '3',
						name: '产地'
					},
					{
						value: '4',
						name: '特卖数量'
					},
					{
						value: '5',
						name: '面料/质地/成分'
					},
					{
						value: '6',
						name: '其他'
					}
				],
				otherList: [{
						value: 1,
						name: '秒杀(秒杀时间段设置)',
						checked: 'true'
					},
					{
						value: 2,
						name: '预购(发货时间设置)',
						checked: 'true'
					},
					{
						value: 3,
						name: '限时购(自动下架时间设置)',
						checked: 'true'
					},
				],
				radioList: [{
						value: 1,
						name: '每账号每天限购'
					},
					{
						value: 2,
						name: '每账号每单限购',
						checked: 'true'
					},
				],
				cate: [],
				priceCate: [],
				basicArr: [],


			}
		},
		onLoad() {
			this.getCate(1);
			this.getCate(2);
		},
		methods: {
			onConfirm() { // 确认发布
				console.log(this.goodsImgList)
				// return
				this.uploadImg();
			},
			uploadImg() { // 先上传图片

				if (this.goodsImgList.length <= 0 || this.videoList.length <= 0) {
					uni.showToast({
						title: '请添加图片或视频后再提交',
						icon: 'none'
					})
					return
				}
				this.goodsImgList.forEach((item) => { //循环上传图片
					uni.uploadFile({
						url: `http://192.168.2.201/shop/uploads/setUploadImg`,
						filePath: item,
						name: 'file',
						success: (res) => {
							if (res.statusCode !== 200) {
								this.imgUrls = []
								return
							}
							res = JSON.parse(res.data)
							if (res.code == 200) {
								this.imgUrls.push(res.data.file)
								console.log(this.imgUrls)
							}
						}
					});
				});
				uni.uploadFile({ //上传视频
					url: `http://192.168.2.201/shop/uploads/setUploadImg`,
					filePath: this.videoList[0],
					name: 'file',
					success: (res) => {
						if (res.statusCode !== 200) {
							this.videoUrls = []
							return
						}
						res = JSON.parse(res.data)
						if (res.code == 200) {
							this.videoUrls.push(res.data.file)
							console.log(this.videoUrls)
						}
					}
				});


			},
			async getCate(cateId) { //获取分类的
				let a = await this.$http.getTypeCate({
					type: cateId
				})
				if (cateId == 1) {
					this.priceCate = a.data
					return
				}
				this.cate = a.data

			},
			// nav路由跳转
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},

			typeSelect(cateid, catename) { //分类1的选择
				this.typeVal = catename;
				this.goods['sysproid'] = cateid;
				console.log(this.goods)
			},
			shopTypeSelect(cateid, catename) { // 分类2的选择
				this.shopTypeVal = catename;
				this.goods['procate'] = cateid;
				console.log(this.goods)
			},
			imgStyle() {
				return this.goodsImgList.length * 112 + 'upx'
			},
			previewImg(index) { //图片预览
				uni.previewImage({
					urls: this.goodsImgList,
					current: index,
					indicator: 'number'
				});
			},
			removeImg(index) { // 移除图片
				this.goodsImgList.splice(index, 1)
			},
			removeVideo(index) {
				this.videoList.splice(index, 1)
			},
			goodVideo() { //选择视频
				if (this.videoList.length >= 1) {
					uni.showToast({
						title: '你已经添加过了',
						icon: 'none'
					})
					return
				};
				let _self = this
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function(res) {
						_self.videoList.push(res.tempFilePath)
					}
				});
			},
			//上传图片
			goodsImg() {
				if (this.goodsImgList.length >= 8) {
					uni.showToast({
						title: '最多只能添加8张',
						icon: 'none'
					})
					return
				};
				uni.chooseImage({
					count: 8, //限制1张图片
					sizeType: ['compressed'], //压缩图
					sourceType: ['album'], //从相册选择
					// shi 异步方法 原是function，改成res=>{}箭头函数
					success: res => {
						// this.shopImg = res.tempFilePaths[0]
						console.log(res.tempFilePaths[0])

						this.goodsImgList = this.goodsImgList.concat(res.tempFilePaths)
					},

				});
			},
			sendChange() {
				if (this.ischecked == false) {
					this.ischecked = true
				} else {
					this.ischecked = false
				}
			},

			// 限购
			radioChange(row, index) {
				if (this.current == index) {
					this.current = -1
				} else {
					for (let i = 0; i < this.radioList.length; i++) {
						if (this.radioList[i].value === row.value) {
							this.current = i;
							break;
						}
					}
				}
			},
			otherChange(row, index) {
				if (this.otherCurrent == index) {
					this.otherCurrent = -1
				} else {
					for (let i = 0; i < this.otherList.length; i++) {
						if (this.otherList[i].value === row.value) {
							this.otherCurrent = i;
							break;
						}
					}
				}
			},

		},
	}
</script>
<style lang="scss" scoped>
	@import 'static/css/myStore.scss';
</style>
